<template>
  <div>
    <el-card style="margin: 20px">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-form :inline="true" class="demo-form-inline" label-width="80px">
            <el-form-item label="目录名称">
              <el-input v-model="form.directoryName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select placeholder="请选择" v-model="form.state">
                <el-option
                  v-for="item in statusList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="emply">清空</el-button>
              <el-button type="primary" size="small" @click="handelSearch"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="handelAdd"
            >新增用户</el-button
          >
        </el-col>
      </el-row>
      <el-alert :title="`共${counts}条记录`" type="info" show-icon> </el-alert>
      <el-table style="width: 100%; margin-top: 20px" :data="directorysData">
        <el-table-column label="序号" width="80px" prop="id" align="center">
        </el-table-column>
        <el-table-column label="所属学科" prop="subjectName" align="center">
        </el-table-column>
        <el-table-column label="目录名称" prop="directoryName" align="center">
        </el-table-column>
        <el-table-column label="创建者" prop="username" align="center">
        </el-table-column>
        <el-table-column label="创建日期" prop="addDate" align="center">
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals" align="center">
        </el-table-column>
        <el-table-column label="状态" prop="state" align="center">
          <template #default="scope">
            {{ scope.row.state === 1 ? "已禁用" : "已启用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template #default="scope">
            <el-button type="text" @click="handelUse(scope.row)"
              >{{ scope.row.state === 1 ? "启用" : "禁用" }}
            </el-button>
            <el-button
              type="text"
              @click="handelModify(scope.row)"
              :disabled="scope.row.state === 0"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="handelDel(scope.row)"
              :disabled="scope.row.state === 0"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <PaginAtion
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        :counts="counts"
        :pagesize="params.pagesize"
      ></PaginAtion>
      <!-- 添加 -->
      <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
        <el-form label-width="100px" :rules="rules">
          <el-form-item label="所属学科" prop="directoryName">
            <el-select
              placeholder="请选择"
              v-model="formInline.subjectID"
              style="width: 280px"
            >
              <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input
              placeholder="请输入目录名称"
              v-model="formInline.directoryName"
              style="width: 280px"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  list,
  add,
  mlSimple,
  changeState,
  remove,
  update
} from '@/api/hmmm/directorys'
import PaginAtion from '@/components/PaginAtion/index'
import { status } from '@/api/hmmm/constants'
export default {
  components: {
    PaginAtion
  },
  data () {
    return {
      params: {
        page: 1,
        pagesize: 10,
        tagName: ''
      },
      directorysData: [],
      counts: 1,
      statusList: [],
      tagsList: [],
      form: {
        directoryName: '',
        state: ''
      },
      formInline: {
        subjectID: '',
        directoryName: ''
      },
      title: '',
      dialogVisible: false,
      rules: {
        subjectID: [
          { required: true, message: '所属学科不能为空', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getList()
    this.statusList = status
  },
  methods: {
    handleSizeChange (val) {
      this.params.pagesize = val
      this.getList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(val)
      this.params.page = val
      this.getList()
      console.log(`当前页: ${val}`)
    },
    async getList () {
      const res = await list(this.params)
      console.log(res)
      this.directorysData = res.data.items
      this.counts = res.data.counts
    },
    // 清空
    emply () {
      this.form = {}
      this.getList()
    },
    // 搜索
    async handelSearch () {
      this.params.directoryName = this.form.directoryName
      const res = await list(this.params)
      console.log(res)
      this.tagsData = res.data.items
      this.getList()
    },
    // 新增用户
    async handelAdd () {
      this.title = '新增目录'
      this.dialogVisible = true
      const res = await mlSimple()
      console.log(res)
      this.tagsList = res.data
    },
    async save () {
      if (this.title === '新增目录') {
        const res = await add(this.formInline)
        console.log(res)
        this.getList()
        this.dialogVisible = false
        this.formInline = {}
      } else {
        await update(this.formInline)
        this.getList()
        this.dialogVisible = false
        this.formInline = {}
      }
    },
    // 启用
    async handelUse (row) {
      // const res = await changeState(row)
      // console.log(res)
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (e) {
        this.$message.error('请求错误!')
      }
    },
    // 删除
    async handelDel (id) {
      await this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res = await remove(id)
      console.log(res)
      this.$message({
        type: 'success',
        message: '成功删除用户!'
      })
      this.getList()
    },
    // 修改
    async handelModify (row) {
      console.log(row)
      this.title = '修改目录'
      this.dialogVisible = true
      this.formInline = { ...row }
    }
  }
}
</script>

<style scoped lang="scss"></style>
